<template>
  <div>
    <div ref="countChart" style="width: 100%;height: 300px" />
    <div style="float: right;margin-right: 40px">
      <el-date-picker
        v-model="startDate"
        type="datetime"
        :placeholder="$t('startDate')"
        align="right"
        :picker-options="pickerOptions1"
        value-format="timestamp"
      />
      <el-button type="primary" icon="el-icon-search" @click="listSolarDeviceDayPowerHistory">{{ $t("search") }}</el-button>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/components/Mixins/resize'
import { listSolarDeviceDayPowerHistory } from '@/views/Solar/api/solarPowerDeviceHistory'
import {
  formatDate
} from '@/util/common'
export default {
  name: 'PowerCount',
  mixins: [resize],
  props: {
    device: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      pickerOptions1: {
        shortcuts: [
          {
            text: this.$t('today'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('today'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('a') + this.$t('week') + this.$t('ago'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      chart: null,
      startDate: ''
    }
  },
  watch: {
    device: {
      deep: true,
      handler() {
        if (this.device && this.device.deviceCore) {
          this.listSolarDeviceDayPowerHistory()
        }
      }
    }
  },
  mounted() {
    this.startDate = new Date().getTime() - 7 * 24 * 60 * 60 * 1000
    this.listSolarDeviceDayPowerHistory()
  },
  methods: {
    listSolarDeviceDayPowerHistory() {
      if (this.device && this.device.deviceCore) {
        const that = this
        listSolarDeviceDayPowerHistory({
          deviceCore: this.device.deviceCore,
          startDate: Math.round(this.startDate / 1000)
        }).then(res => {
          let { data } = res
          const { code } = res
          if (code !== '200') {
            data = []
          }
          that.showChart(data)
        })
      }
    },
    showChart(res) {
      const inputPowerData = []
      const outputPowerData = []
      const date = []
      for (const i of res) {
        inputPowerData.push(i.inputPower)
        outputPowerData.push(i.outputPower)
        date.push(formatDate(this, i.timestamp))
      }
      this.chart = echarts.init(this.$refs.countChart, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#FFF',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          text: this.$t('surplusCount')
        },
        toolbox: {
          left: 'right',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            }
            // restore: {},
            // saveAsImage: {}
          }
        },
        grid: {
          left: '0%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: date,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            show: false
          }
        ],
        legend: {
          data: [
            this.$t('input'),
            this.$t('output')
          ]
        },
        series: [
          {
            name: this.$t('input'),
            type: 'bar',
            data: inputPowerData,
            barBorderRadius: 30,
            itemStyle: {
              normal: {
                label: {
                  formatter(params) {
                    return params.value + 'Wh'
                  },
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#909399'
                  }
                }
              }
            }
          },
          {
            name: this.$t('output'),
            type: 'bar',
            data: outputPowerData,
            barBorderRadius: 30,
            itemStyle: {
              normal: {
                label: {
                  formatter(params) {
                    return params.value + 'Wh'
                  },
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#909399'
                  }
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>


